<template>
  <div id="app">
    <!--导航栏-->
    <Header></Header>
    <!--   主体部分 -->
    <div class="body_main justify-content-center">
      <div class="main_left">
        <!-- 主体左侧 个人信息简介 -->
        <div class="body_left">
          <div class="user-box">
            <div class="user_name">
              <!-- 头像 -->
              <div class="user_img">
                <a href="score">
                  <img src="../assets/user_logo.jpg" />
                </a>
                <div class="user_img_name">
                  <span>{{ News.createName }}</span>
                </div>
              </div>
              <div class="user_img_info">
                <span>访问量：{{ News.memo }}</span>
                <div class="user_age">
                  <span>码龄：0年</span>
                  <img src="../assets/useranquan.png" />
                  <span>绿色用户</span>
                </div>
              </div>
            </div>
            <div class="item-rank"></div>
            <div class="user_info">
              <div class="user_img_info">
                <span data-v-bkms1871>博客描述：{{ News.newHead }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- /主体左侧 个人信息简介 -->

        <!-- 主体中部 博客内容 -->
        <div class="body_content">
          <div class="consult_body">
            <div class="consult_title">
              <h1>{{ News.newHead }}</h1>
              <div class="article-info-box">
                <div class="article-bar-top">
                  <span>用户名称：{{ News.createName }}</span>
                  <span>发布时间： {{ News.newsTime }} </span>
                </div>
                <span>分类专栏：{{ News.name }}</span>
              </div>
            </div>
            <div class="consult_content">
              {{ News.newsBody }}
            </div>
          </div>
        </div>
        <!-- /主体中部 博客内容 -->
      </div>
      <!-- 主体右侧 广告栏 -->
      <div class="main_right">
        <div class="gg_box">
          <img src="../assets/gg1.png" />
        </div>
        <div class="gg_box">
          <img src="../assets/gg2.jpg" />
        </div>

      </div>
      <!-- 主体右侧 广告栏 -->
    </div>
    <!--footer -->
    <!--脚页-->
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from '../components/Header';
  import Footer from '../components/Footer';
  export default {
    name: 'Search',
    components: {
      Header,
      Footer
    },
    data() {
      return {
        News: {},
      }
    },

    methods: {
      /*通过单个id查询资讯*/
      findUserById(id) {
        this.updateFormVisible = true;
        let _this = this;
        this.$axios
          .get('http://localhost:8087/news/selectNewsById/' + id)
          .then(function(res) {
            _this.News = res.data[0];
            console.log(res.data[0]);
          })
          .catch(function(err) {
            alert('查询失败');
          });
      },
    },
    created() {
      this.findUserById(this.$route.params.id);
    }
  };
</script>

<style scoped>
  .body_main {
    padding: 6px 12px 0 12px;
    display: flex;
    background-color: #333333;
  }

  .justify-content-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }

  .main_left {
    margin-left: 8px;
    float: left;
  }

  .body_left {
    width: 300px;
    float: left;
    padding: 16px 16px 6px 16px;
  }

  .body_content {
    min-height: 810px;
    width: 1010px;
    float: right;
    padding: 16px 16px 6px 0px;

  }

  .main_right {
    width: 300px;
    height: 400px;
    float: right;
    padding: 16px 16px 6px 0px;
  }

  .gg_box img {
    height: 100%;
    width: 100%;
  }

  .user-box {
    height: 300px;
    margin-bottom: 8px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  }

  .user_name {
    height: 50%;
  }

  .user_img {
    padding: 16px 16px 6px 16px;
    display: flex !important;
    align-items: center;
  }

  .user_img_info {
    width: 250px;
    height: 100%;
    padding: 16px 16px 6px 16px;
  }

  .user_img_info span[data-v-bkms1871]{
    height: 100px;
    width: 250px;
  }

  .user_age {
    display: flex;
    align-items: center;
  }

  .user_age img {
    height: 14px;
    margin-left: 8px;
    margin-right: 4px;
    vertical-align: -2px;
  }

  .item-rank {
    height: 1px;
    background-color: #f5f6f7;
    width: 268px;
    margin: auto;
  }

  .user_img_info span {
    display: flex !important;
    color: #999aaa;
    font-size: 13px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
  }

  .user_img img {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }

  .user_img span {
    margin-left: 10px;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user_info {
    width: 300px;
    height: 150px;
  }

  .consult_body {
    margin-bottom: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    padding-bottom: 10px;
    padding: 0 24px 16px;
  }

  .consult_title {
    height: 120px;
    padding-top: 8px;
  }

  .consult_title h1 {
    font-size: 28px;
    word-wrap: break-word;
    color: #222226;
    font-weight: 600;
    margin: 0;
    word-break: break-all;
  }

  .article-info-box {
    margin-top: 10px;
    height: 80px;
    position: relative;
    background: #f8f8f8;
    border-radius: 4px;
  }

  .article-bar-top {
    color: #999aaa;
    width: 58%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .article-bar-top span{
    color: #999aaa;
    width: 68%;
  }
  .article-info-box span{
    color: #999aaa;
    width: 68%;
    padding-left: 12px;
    padding-top: 12px;
  }
  .consult_content{
      margin:0 auto;
      width: 90%;
      line-height:52px;
      text-indent:35px;
  }
</style>
